<template>
  <div class="container">
    <el-form :model="formInline" label-width="120px" align="left" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.page.container')+$t('m.state')">
            <el-select v-model="formInline.state" :placeholder="$t('m.choose')">
              <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24" align="right">
        <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
        <el-button @click="add" v-if="hasPermission('add')">{{$t('m.add')}}</el-button>
        <el-button type="primary" @click="editState" v-if="hasPermission('editState')">{{$t('m.editState')}}</el-button>
      </el-col>
    </el-row>

    <!-- table数据展示 start -->
    <el-row>
      <el-col :span="24">
        <el-table ref="table" stripe empty-text fits class="table-wrap" :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" @selection-change="handleMultiSelectionChange" v-loading="tableLoading">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" prop="containercode" show-overflow-tooltip :label="$t('m.container.containercode')"></el-table-column>

          <el-table-column width="100" align="center" prop="stateT" :label="$t('m.state')"></el-table-column>
          <el-table-column align="center" prop="containertype" :label="$t('m.page.container')+$t('m.type')"></el-table-column>

          <el-table-column align="center" prop="remark" :label="$t('m.remark')" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" prop="creator" :label="$t('m.creator')" show-overflow-tooltip></el-table-column>

          <el-table-column width="200" align="center" prop="createdateT" :label="$t('m.createdate')"></el-table-column>

          <el-table-column align="center" prop="modifier" :label="$t('m.modifier')" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" prop="modifydate" :label="$t('m.modifydate')"></el-table-column>

          <el-table-column width="100" align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <!-- <el-button type="primary" :loading="true">加载中</el-button> -->
              <el-button v-if="(scope.row.state==1||scope.row.state==2)&&hasPermission('table-edit')" @click.stop="editContainer(scope.row.containerid)" size="mini" type="primary">{{$t('m.edit')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->

    <!-- 批量修改状态开始 -->
    <el-dialog width="600px" :title="$t('m.editState')" :visible.sync="dialogFormVisible2">
      <el-select size="mini" v-model="stateValue" :placeholder="$t('m.choose')">
        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible2 = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handleState">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改状态结束 -->

    <!-- 新增&编辑容器dialog start -->
    <handleContainerPopup v-if="handleContainerPopupVisible" :dialogVisible="handleContainerPopupVisible" :typeOptions="containerType" :id="containerId" @callback="init" @close="handleContainerPopupVisible=false"></handleContainerPopup>
    <!-- 新增&编辑容器dialog end -->
  </div>
</template>

<script>
import common from '@/utils/common'

export default {
  name:'container',
  data(){
    return {
      name:'',
      formInline:{
        state:''
      },
      tableData:[],
      state:[
        {
          value:'0',
          label:this.$t('m.stop')
        },
        {
          value:'1',
          label:this.$t('m.start')
        },
        {
          value:'2',
          label:this.$t('m.occupy')
        }
      ],
      stateValue:'', //状态

      containerType:[], // 容器类型
      handleContainerPopupVisible:false, // 新增&编辑容器 dialog显示隐藏

      dialogFormVisible2:false // 修改状态 dialog显示隐藏
    }
  },
  computed:{
    stateOptions(){
      return [ // 容器状态
        { label:this.$t('m.all'), value:'' },
        { label:this.$t('m.stopped'), value:0 },
        { label:this.$t('m.started'), value:1 },
        { label:this.$t('m.occupied'), value:2 }
      ]
    }
  },
  activated(){
    this.init()
  },
  components:{
    handleContainerPopup:() => import('@/components/container/handle-container-popup')
  },
  methods:{
    add(){
      this.containerId=''
      this.handleContainerPopupVisible=true
      this.getContainerType()
    },
    search(){
      this.page = 1
      this.init()
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/container/page',
        params:{
          state:this.formInline.state,
          warehouseId:this.$store.state.basicInfo.warehouseInfo.id,
          page:this.page,
          rows:this.rowSize
        }
      }).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
        this.tableData.forEach((item, index, arr) => {
          arr[index].focus = 0
          arr[index].createdateT = common.timestampToTime(item.createdate)
          if (arr[index].modifydate){
            arr[index].modifydate = common.timestampToTime(
              arr[index].modifydate
            )
          } else {
            arr[index].modifydate = '- -'
          }
          arr[index].stateT = [
            this.$t('m.stopped'),
            this.$t('m.started'),
            this.$t('m.occupied')
          ][item.state]
        })
      })
    },
    // 获取容器类型
    getContainerType(){
      this.$axios({
        method:'get',
        url:'containertype/list?state=1'
      }).then(({ data }) => {
        this.containerType = data
      })
    },
    editContainer(id){
      this.containerId = id
      this.handleContainerPopupVisible = true
      this.getContainerType()
    },

    editState(){
      if (!this.tableRowSelected.length)
        return this.callbackMessage(
          this.$t('m.choose') + this.$t('m.page.container')
        )
      this.dialogFormVisible2 = true
    },
    handleState(){
      let arr = []
      this.tableRowSelected.forEach(v => {
        arr.push(v.containerid)
      })
      this.$axios({
        method:'put',
        url:`/container/state`,
        data:{
          ids:arr,
          state:this.stateValue
        }
      })
        .then(() => {
          this.dialogFormVisible2 = false
          this.$message({
            showClose:true,
            message:this.$t('m.editSuccess'),
            type:'success',
            duration:1000
          })
          this.stateValue = ''
          this.init()
        })
    }
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible2=false
    this.handleContainerPopupVisible=false
    next()
  }
}
</script>
<style scoped>
.el-select {
  width: 100%;
}
</style>